<template>
    <div v-theme:column="'wide'" id="show-blogs">
        <h1>博客总览</h1>
            <input type="text" placeholder="搜索" v-model="search">

            <div v-for="(blog,index) in filteredBlogs" :key="index" class="single-blog">
            <router-link :to="'/blog/' + blog.id">
                    <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
                <article>
                    {{blog.body | snippet}}
                </article>
            </router-link>    
            </div>

    </div>


 

</template>

<script>


export default {
    name: 'show-blogs',
    data() {
        return {
            blogs:[],
            search: ""
        }
    },
    created(){
        this.$http.get("http://jsonplaceholder.typicode.com/posts").then(function(data){
            console.log(data);
            this.blogs = data.body.slice(0,10);
            console.log(this.blogs)
        })
    },
    computed:{
        filteredBlogs:function(){
            return this.blogs.filter((blog) =>{
                return blog.title.match(this.search);
            })
        }
    },
    // 局部 
    filters: {
        // "to-uppercase": function(value){
        //     return value.toUpperCase()
        // }
        toUppercase(value){
            return value.toUpperCase()
        }
    },
    directives: {
        'rainbow': {
            bind(el){
                el.style.color = "red";
            }
        }
    }

}
</script>

<style>

</style>
